<template>
  <div class="index">
    <section class="header">
      <div class="header_time">
        已安全施工：<span>{{ deltaTime.d }}</span> 天
        <span>{{ deltaTime.h }}</span
        >时 <span>{{ deltaTime.m }}</span
        >分 <span>{{ deltaTime.s }}</span
        >秒
      </div>
      <div class="header_title">智慧工地监控数据中心</div>
      <div class="header_date">
        {{ currentTime.day }} {{ currentTime.weekday }} {{ currentTime.hour }}
      </div>
    </section>
    <section class="bodyBox">
      <div class="bodyBox_Small">
        <div>
          <projectDescription @projectDescription="projectDescriptionFun" />
        </div>
        <div><dataManage @dataFun="dataFun" /></div>
        <div><qualityManage @qualityFun="qualityFun" /></div>
      </div>
      <div class="bodyBox_Big">
        <div class="bodyBox_monitor"><videoAndNews /></div>
        <div class="bodyBox_schedule"><scheduleManage /></div>
      </div>
      <div class="bodyBox_Small">
        <div><newsCenter @newsFun="newsFun" /></div>
        <div><personnelManage @personnelFun="personnelFun" /></div>
        <div><safetyManage @safetyFun="safetyFun" /></div>
      </div>
    </section>

    <project />
    <schedule />
    <datapage />
    <quality />
    <news />
    <newsDetail />
    <personnel />
    <safety />
    <threeLevel />
  </div>
</template>

<script>
import projectDescription from "./module/projectDescription.vue";
import dataManage from "./module/dataManage.vue";
import qualityManage from "./module/qualityManage.vue";
import videoAndNews from "./module/videoAndNews.vue";
import scheduleManage from "./module/scheduleManage.vue";
import newsCenter from "./module/newsCenter.vue";
import personnelManage from "./module/personnelManage.vue";
import safetyManage from "./module/safetyManage.vue";

import project from "../components/module/dialog/project.vue";
import schedule from "../components/module/dialog/schedule.vue";
import datapage from "../components/module/dialog/data.vue";
import quality from "../components/module/dialog/quality.vue";
import news from "../components/module/dialog/news.vue";
import newsDetail from "../components/module/dialog/newsDetail.vue";
import personnel from "../components/module/dialog/personnel.vue";
import safety from "../components/module/dialog/safety.vue";

import threeLevel from "../components/module/dialog/threeLevel.vue";

import * as dayjs from "dayjs";

export default {
  components: {
    projectDescription,
    dataManage,
    qualityManage,
    videoAndNews,
    scheduleManage,
    newsCenter,
    personnelManage,
    safetyManage,

    project,
    schedule,
    datapage,
    quality,
    news,
    newsDetail,
    personnel,
    safety,
    threeLevel,
  },
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      deltaTime: "",
      currentTime: {},
    };
  },
  methods: {
    // 获取累计时间
    getDeltaTime() {
      setInterval(() => {
        this.deltaTime = this.$getDeltaTime("2021.7.15");
        // this.deltaTime = `${data.d}<span style="color: #ffc71d;">天</span>${data.h}<span style="color: #ffc71d;">时</span>${data.m}<span style="color: #ffc71d;">分</span>${data.s}<span style="color: #ffc71d;">秒</span>`;
        this.getDate();
      }, 1000);
    },
    // 获取当前时间
    getDate() {
      this.currentTime.day = dayjs().format("YYYY-MM-DD");
      this.currentTime.weekday =
        dayjs().day() == 1
          ? "星期一"
          : dayjs().day() == 2
          ? "星期二"
          : dayjs().day() == 3
          ? "星期三"
          : dayjs().day() == 4
          ? "星期四"
          : dayjs().day() == 5
          ? "星期五"
          : dayjs().day() == 6
          ? "星期六"
          : "星期日";
      this.currentTime.hour = `${dayjs().hour()} : ${
        dayjs().minute() > 9 ? dayjs().minute() : "0" + dayjs().minute()
      }`;
    },
    // 项目简介弹框
    projectDescriptionFun(e) {
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "projectShow",
        cont: true,
      });
      console.log(e);
    },
    // 资料管理
    dataFun(e) {
      console.log(e);
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "dataShow",
        cont: e,
      });
    },
    // 质量管理弹框
    qualityFun(e) {
      console.log(e);
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "qualityShow",
        cont: e,
      });
    },
    // 新闻中心弹框
    newsFun(e) {
      console.log(e);
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "newsShow",
        cont: e,
      });
    },
    // 人员管理弹框
    personnelFun(e) {
      console.log(e);
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "personnelShow",
        cont: e,
      });
    },
    // 安全管理弹框
    safetyFun(e) {
      console.log(e);
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "safetyShow",
        cont: e,
      });
    },

    /** API */
  },
  mounted() {
    this.getDeltaTime();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.index {
  width: 100%;
  height: 100vh;
  background-color: #0a1e43;
}
.header {
  width: 100%;
  height: 84px;
  background: url("../assets/header.png");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
  display: flex;
  justify-content: space-between;
  span {
    color: #ffc71d;
  }
  div {
    width: 33%;
    text-align: center;
    line-height: 84px;
    font-size: 18px;
    p {
      display: inline-block;
    }
  }
  .header_title {
    font-size: 40px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #8fb4ff;
  }
}
.bodyBox {
  width: 100%;
  height: auto;
  padding-top: 22px;
  display: flex;
  justify-content: space-around;
  .bodyBox_Small {
    width: 21%;
    div {
      width: 100%;
      height: 300px;
      // height:calc((100vh - 166px)/3);
      // height: auto;
      // aspect-ratio: 4/3;
      margin-top: 20px;
      background: url("../assets/smallBG.png");
      background-size: 100%;
      box-shadow: 0px 0px 30px 1px rgba(93, 150, 237, 0.5) inset;
    }
    div:nth-child(1) {
      margin: 0;
    }
  }
  .bodyBox_Big {
    width: 54%;
    .bodyBox_monitor {
      width: 100%;
      height: 620px;
      // height: auto;
      // aspect-ratio: 5/3;
      background: url("../assets/bigBG.png");
      background-size: 100%;
      box-shadow: 0px 0px 30px 1px rgba(93, 150, 237, 0.5) inset;
    }
    .bodyBox_schedule {
      width: 100%;
      height: 300px;
      // height: auto;
      // aspect-ratio: 10/3;
      margin-top: 20px;
      background: url("../assets/middleBG.png");
      background-size: 100%;
      box-shadow: 0px 0px 30px 1px rgba(93, 150, 237, 0.5) inset;
    }
  }
}
</style>
